<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>404 页面未找到</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <style>
        .hover-scale {
            transition: transform 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
        }
        .hover-scale:hover {
            transform: scale(1.06);
        }
        .error-code {
            background: linear-gradient(150deg, #3b82f6, #2563eb);
            -webkit-background-clip: text;
            background-clip: text;
            color: transparent;
        }
    </style>
</head>
<body class="min-h-screen flex flex-col bg-gray-50">
    <main class="flex-1 container mx-auto px-4 py-16 lg:py-24">
        <div class="max-w-3xl mx-auto text-center">
            <div class="text-8xl lg:text-12xl font-black mb-6 error-code">404</div>
            <h1 class="text-3xl lg:text-4xl font-semibold text-gray-900 mb-4">页面好像走丢了...</h1>
            <p class="text-gray-600 mb-8 text-lg px-4 md:px-8">可能的原因：输入的URL有误、页面已被删除(其实是我还没设计)，或需要更高权限访问。建议检查地址拼写，或返回首页探索其他内容。</p>
            <!-- 仅保留返回首页按钮 -->
            <div class="flex justify-center">  <!-- 简化为居中布局 -->
                <a href="/" class="bg-indigo-600 hover:bg-indigo-700 text-white font-medium py-3 px-6 rounded-lg hover-scale transition text-lg">
                    返回首页
                </a>
            </div>
        </div>
    </main>

    <footer class="bg-gray-900 text-white py-6 mt-12">
        <div class="container mx-auto px-4 text-center">
            <p class="text-sm opacity-80">&copy;claus保留所有权利。</p>
            <p class="text-sm opacity-70 mt-2">技术支持：3266928143.com</p>
        </div>
    </footer>
</body>
</html>
    